<template>
    <div>
        <!--    <Card v-if="auction.auctionTimeStamp<nowTime">请不要着急，尚未到拍卖时间</Card>-->
        <!--    <Card v-else>-->
        <div v-if="notOn">
            <Card>尚未到拍卖时间</Card>
        </div>
        <div v-else-if="pass">
            <Card>拍卖时间已过，下次赶早</Card>
        </div>
        <div v-else>
            <Row>
                <Col span="16">
                    <Card>
                        <Row style="height: fit-content" :gutter="18">
                            <Col span="12">
                                <img v-bind:src="auctionCover" style="height: auto;width: 100%">
                            </Col>
                            <Col span="12">
                                <img v-bind:src="auctionPicture" style="height: auto;width: 100%">
                            </Col>
                        </Row>
                    </Card>
                </Col>
                <Col>
                    <Card>
                        <Row>
                            <Col>
                                <Row>
                                    <Col>{{auction.auctionName}}</Col>
                                    <Col offset="2">{{auction.auctionTag}}</Col>
                                </Row>
                                <br>
                                <Row>{{auction.auctionBrief}}</Row>
                                <Row type="flex" justify="center" align="middle" style="background: #d7dde4">
                                    <Col>
                                        当前价格：
                                    </Col>
                                    <Col style="color: orangered;font-size: 35px">
                                        ￥{{nowPrice}}
                                    </Col>
                                </Row>
                                <Row>
                                    <Col>当前得主：{{nowWinName}}</Col>
                                </Row>
                                <Row>
                                    <Col>拍卖还有{{leftMin}}分{{leftSec}}秒结束</Col>
                                </Row>
                            </Col>
                        </Row>
                        <Row>
                            <Col><label>请输入您的加价额</label></Col>
                            <Col span="4"><Input placeholder="加价额" v-model="addPrice"></Input></Col>
                            <Button @click="addMoney">加价</Button>
                        </Row>
                    </Card>
                </Col>
            </Row>
        </div>
    </div>
</template>
<script>
    import axios from "axios";
    import globalData from "@/utils/globalData";

    export default {
        name: "AuctionBrief",
        data() {
            return {
                notOn: false,
                pass: false,
                leftMin: '',
                leftSec: '',
                auctionCover: '',
                auctionPicture: '',
                auctionId: this.$route.params.auctionId,
                addPrice: 1,
                nowPrice: 0,
                nowWinName: '',
                nowTime: new Date().getTime(),
                auction: {},
                timer: ''
            }
        },
        //每秒钟刷新当前的拍卖价格
        mounted() {
            let self = this
            this.timer = setInterval(() => {
                self.updateNowPrice()
            }, 1000)
            //需要调用函数来让组件销毁的时候一并销毁掉setInterval，否则将会在切换到其他界面的时候仍然持续发起请求
            this.$once('hook:beforeDestroy', function () {
                clearTimeout(this.timer)
            })
        },
        created: function () {
            let self = this
            axios({
                method: 'get',
                url: 'auction/' + this.auctionId
            }).then(function (res) {
                self.auction = res.data
                self.nowPrice = self.auction.startPrice
                let nowTime = Date.parse(new Date()) / 1000;
                let leftSecond = Math.floor((self.auction.auctionTimeStamp / 1000 + 15 * 60) - nowTime)
                console.log(leftSecond+"LS")
                if (leftSecond < 0) {
                    self.pass = true
                } else if (leftSecond > 60 * 15) {
                    self.notOn = true
                } else {
                    //获取拍卖商品的封面
                    let myself = self
                    axios({
                        method: 'get',
                        url: "/file/sig/auction/" + self.auction.coverUUID,
                        responseType: 'blob'
                    }).then(function (res) {
                        myself.auctionCover = window.URL.createObjectURL(res.data)
                    })
                    //获取图片
                    axios({
                        method: 'get',
                        url: "/file/sig/auction/" + self.auction.pictureUUID,
                        responseType: 'blob'
                    }).then(function (res) {
                        myself.auctionPicture = window.URL.createObjectURL(res.data)
                    })
                }
            })
        },
        methods: {
            updateNowPrice() {
                let self = this
                axios({
                    method: 'get',
                    url: '/auction/nowInfo/' + this.auctionId
                }).then(function (res) {
                    self.nowPrice = res.data.nowPrice
                    self.nowWinName = res.data.nowWinName
                })
                let nowTime = Date.parse(new Date()) / 1000;
                let leftSecond = Math.floor((this.auction.auctionTimeStamp / 1000 + 15 * 60) - nowTime)
                this.leftSec = leftSecond % 60
                this.leftMin = Math.floor(leftSecond / 60)
                if (leftSecond < 0) {
                    this.pass = true
                }
                if (leftSecond > 60 * 15) {
                    self.notOn = true
                }
            },
            addMoney() {
                let self = this
                axios({
                    method: 'patch',
                    url: '/auction/' + this.auctionId + "/" + this.addPrice + "/" + globalData.USER.userId + "/" + globalData.USER.nickName
                }).then(function () {
                    self.$Notice.success({
                        title: "加价成功"
                    })
                })
            }
        }
    }
</script>

<style scoped>

</style>